import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';

interface HeaderProps {
  activeSection: string;
  onSectionChange: (section: string) => void;
  onBackToLanding: () => void;
}

const Header = ({ activeSection, onSectionChange, onBackToLanding }: HeaderProps) => {
  const [scrolled, setScrolled] = useState(false);
  
  // Handle scroll effect for header
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  
  // Navigation sections
  const sections = [
    { id: 'profile', label: '个人简介' },
    { id: 'skills', label: '技能栈' },
    { id: 'education', label: '教育背景' },
    { id: 'experience', label: '工作经历' },
    { id: 'projects', label: '个人项目' },
    { id: 'interests', label: '兴趣爱好' }
  ];
  
  return (
    <header 
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        scrolled 
          ? 'bg-color-card/90 backdrop-blur-md py-3 shadow-lg' 
          : 'bg-transparent py-5'
      }`}
    >
      <div className="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between">
        {/* Name and Title */}
        <div className="flex items-center mb-4 md:mb-0">
          <motion.h1 
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="text-2xl md:text-3xl font-bold text-gray-100 text-shadow"
          >
            王明
          </motion.h1>
          <motion.div 
            initial={{ opacity: 0, x: 10 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="ml-3 text-gray-300"
          >
            <p className="text-sm md:text-base">前端开发工程师</p>
          </motion.div>
        </div>
        
        {/* Navigation */}
        <nav className="w-full md:w-auto">
          <ul className="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm">
            {sections.map((section) => (
              <li key={section.id}>
                <motion.button
                  onClick={() => onSectionChange(section.id)}
                  whileHover={{ 
                    scale: 1.05,
                    textShadow: activeSection === section.id 
                      ? '0 0 15px rgba(255, 255, 255, 0.8)' 
                      : '0 0 10px rgba(255, 255, 255, 0.5)'
                  }}
                  className={`relative py-1 px-1 transition-colors ${
                    activeSection === section.id 
                      ? 'text-white font-medium' 
                      : 'text-gray-300 hover:text-white'
                  }`}
                >
                  {section.label}
                  {activeSection === section.id && (
                    <motion.span
                      layoutId="active-indicator"
                      className="absolute bottom-0 left-0 w-full h-0.5 bg-white rounded-full"
                      initial={{ scaleX: 0 }}
                      animate={{ scaleX: 1 }}
                      transition={{ type: 'spring', stiffness: 300, damping: 30 }}
                    />
                  )}
                </motion.button>
              </li>
            ))}
          </ul>
        </nav>
        
        {/* Contact Info */}
        <div className="flex items-center mt-4 md:mt-0 space-x-4">
          <motion.a
            href="tel:123456789"
            whileHover={{ scale: 1.1 }}
            className="text-gray-300 hover:text-white transition-colors"
            aria-label="Phone"
          >
            <i className="fa-solid fa-phone"></i>
          </motion.a>
          <motion.a
            href="mailto:wangming@example.com"
            whileHover={{ scale: 1.1 }}
            className="text-gray-300 hover:text-white transition-colors"
            aria-label="Email"
          >
            <i className="fa-solid fa-envelope"></i>
          </motion.a>
          <motion.a
            href="https://github.com"
            target="_blank"
            rel="noopener noreferrer"
            whileHover={{ scale: 1.1 }}
            className="text-gray-300 hover:text-white transition-colors"
            aria-label="GitHub"
          >
            <i className="fa-brands fa-github"></i>
          </motion.a>
          <motion.button
            onClick={() => onBackToLanding()}
            whileHover={{ scale: 1.05 }}
            className="ml-2 text-gray-300 hover:text-white transition-colors"
            aria-label="Back to landing"
          >
            <i className="fa-solid fa-arrow-left"></i>
          </motion.button>
        </div>
      </div>
    </header>
  );
};

export default Header;